<template>
    <ul>
        <li v-for="ides in ideList" :key="ides.id">
            <el-card
                style="max-width: 368px; 
                height: 128px; 
                line-height:16px ;
                background-color: rgb(53, 57, 65); 
                color: white; 
                font-family: '等线';
                font-size: 12px;
                padding: 0px;"
            >
                <h1>
                    {{ ides.name }}
                    <el-button @click.native="downloadInstaller()" style="float: right;">下载</el-button>
                </h1>
                <a style="color: grey;">{{ ides.description }}</a> 
                <p><el-button @click.native="deleteTemplate(ides.id,ides.name)" style="float: right; color: white; background-color: darkred;">删除</el-button></p>
            </el-card>
            <p></p>
        </li>
    </ul>
</template>

<script setup lang="ts" name="My_templates">
import { ref, onMounted } from 'vue';
import axios from 'axios';
interface IDE {
  id: number;
  name: string;
  description: string;
}
const ideList = ref<IDE[]>([]); // IDE 列表
const authToken = localStorage.getItem('authToken');

const fetchIDEsData = async () => {
  try {
    const response = await axios.get(`${window.location.protocol}//${window.location.hostname}/api/my-ide-data`,{
      headers: {
        'Authorization': `token ${authToken}`  // 将token添加到Authorization头部
      }});
    ideList.value = response.data;
  } catch (error) {
    console.error('Failed to fetch ide data:', error);
  }
};

onMounted(() => {
  fetchIDEsData();
  console.log(ideList.value);
});

async function downloadFile(name: string, description: string) {
  try {
    const response = await axios.get(`${window.location.protocol}//${window.location.hostname}/api/download`, {
      params: { name, description },
      responseType: 'blob', 
      headers: {
        'Authorization': `Bearer ${authToken}`,  // 在请求头中加入token
      }
    }
    );

    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `${name}.ps1`); // 设置下载文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } catch (error) {
    console.error('Failed to download file:', error);
  }
}
async function downloadInstaller() {
  // 暂时下载固定的安装包
  try {
    const response = await axios.get(`${window.location.protocol}//${window.location.hostname}/api/downloadInstaller`, {
      params: {  },
      responseType: 'blob', 
      headers: {
        'Authorization': `Bearer ${authToken}`,  // 在请求头中加入token
      }
    }
    );

    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `DevStar IDE Desktop.exe`); // 设置下载文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } catch (error) {
    console.error('Failed to download file:', error);
  }
}
async function deleteTemplate(ideId:number , ideName: string) {
  try {
    const response = await axios.post(`${window.location.protocol}//${window.location.hostname}/api/delete-template`, {
      ideName
    },
    {
      headers: {
        'Authorization': `token ${authToken}`  // 将token添加到Authorization头部
    }});

    if (response.status === 200) { // 检查是否删除成功
      ideList.value = ideList.value.filter(ide => ide.id !== ideId); // 从列表中移除删除的项
    }
  } catch (error) {
    console.error('Failed to delete template:', error);
  }
}
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>
